<template>
	<view>
		<view>
			<button @click="openAll" v-if="!mainSwitch">打开总开关</button>
			<button @click="closeAll" v-if="mainSwitch">关闭总开关</button>
			<view v-if="mainSwitch">
				<view class="bookMes">
					<view class="bookMesHead">自行车ID</view>
					<input placeholder="出错啦" disabled="false" :value="deviceId" />
				</view>
				<view class="bookMes">
					<view class="bookMesHead">自行车位置</view>
					<input placeholder="出错啦" disabled="false" :value="deviceData.position" />
				</view>
				<view class="bookMes">
					<view class="bookMesHead">光照阈值(lux)</view>
					<input placeholder="请输入" @input="theLight" />
				</view><br>
				<view style="display: flex;">
					<button class="controlBox" @click="Ctrl1" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						打开左转向灯
					</button>
					<button class="controlBox" @click="Ctrl2" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						打开右转向灯
					</button>
				</view>
				<view style="display: flex;">
					<button class="controlBox" @click="Ctrl3" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						关闭转向灯
					</button>
					<button class="controlBox" @click="Ctrl4" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						打开照明灯
					</button>
				</view>
				<view style="display: flex;">
					<button class="controlBox" @click="Ctrl5" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						关闭照明灯
					</button>
					<button class="controlBox" @click="Ctrl6" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						关闭电机
					</button>
				</view>
				<view style="display: flex;">
					<button class="controlBox" @click="Ctrl7" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						电机正转
					</button>
					<button class="controlBox" @click="Ctrl8" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						电机反转
					</button>
				</view>
				<view style="display: flex;">
					<button class="controlBox" @click="Ctrl9" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						电机加速
					</button>
					<button class="controlBox" @click="Ctrl10" plain="true"
						style="border-color: #F1F1F1;border-right: none;border-bottom: none;">
						电机减速
					</button>
				</view>
				
			
				
				<br>
				<button @click="setLight()" class="buttonLast">设置光照阈值</button>
				<button @click="simulation()" class="buttonLast">模拟故障</button>
				<button @click="simulationClose()" class="buttonLast">关闭模拟故障</button>
			</view>

		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				deviceId: store.state.carId,
				deviceData: {},
				lightV: 0,
				mainSwitch: true
			}
		},
		methods: {
			Ctrl1() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'A'
				}
				store.commit("setSendMsg", msg)
				console.log('打开左转向灯');
			},
			Ctrl2() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'B'
				}
				store.commit("setSendMsg", msg)
				console.log('打开右转向灯');
			},
			Ctrl3() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'C'
				}
				store.commit("setSendMsg", msg)
				console.log('关闭转向灯');
			},
			Ctrl4() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'D'
				}
				store.commit("setSendMsg", msg)
				console.log('打开照明灯');
			},
			Ctrl5() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'E'
				}
				store.commit("setSendMsg", msg)
				console.log('关闭照明灯');
			},
			Ctrl6() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'F'
				}
				store.commit("setSendMsg", msg)
				console.log('关闭电机');
			},
			Ctrl7() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'G'
				}
				store.commit("setSendMsg", msg)
				console.log('电机正转');
			},
			Ctrl8() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'H'
				}
				store.commit("setSendMsg", msg)
				console.log('电机反转');
			},
			Ctrl9() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'I'
				}
				store.commit("setSendMsg", msg)
				console.log('电机加速');
			},
			Ctrl10() {
				const msg = {
					type: 1,
					deviceId: this.deviceId,
					code: 'J'
				}
				store.commit("setSendMsg", msg)
				console.log('电机减速');
			},
			theLight: function(e) {
				this.lightV = e.target.value
			},
			setLight() {
				if (this.lightV != '') {
					const msg = {
						type: '2',
						deviceId: this.deviceId,
						value: this.lightV
					}
					store.commit("setSendMsg", msg)
					uni.showToast({
						title: "设置成功"
					})
				} else {
					uni.showToast({
						title: "请输入光照阈值"
					})
				}
			},
			openAll() {
				this.mainSwitch = true
				const msg = {
					deviceId: this.deviceId,
					deviceType: 'open'
				}
				store.commit("setSendMsg", msg)
			},
			closeAll() {
				this.mainSwitch = false
				const msg = {
					deviceId: this.deviceId,
					deviceType: 'close'
				}
				store.commit("setSendMsg", msg)
			},
			simulation() {
				const msg = {
					deviceType: 'simulation',
					deviceId: this.deviceId,
				}
				store.commit("setSendMsg", msg)
				uni.showToast({
					title: "模拟成功"
				})
			},
			simulationClose() {
				const msg = {
					deviceType: 'simulationClose',
					deviceId: this.deviceId,
				}
				store.commit("setSendMsg", msg)
				uni.showToast({
					title: "已关闭模拟"
				})
			}
		},
		computed: {
			allData() {
				return store.state.allData
			},
		},
		watch: {
			allData: {
				deep: true,
				handler() {
					if (store.state.carId == store.state.allData.deviceId) {
						this.deviceData = store.state.allData
						console.log(this.deviceData);
					}
				}
			}
		},
	}
</script>

<style>
	.controlBox {
		width: 50%;
		height: 50px;
		text-align: center;
		border-radius: 100px;
		background-color: #f9c327;
		margin: 10px 10px 0px 10px;
	}

	.bookMes {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 6%;
		font-size: 40rpx;
		margin-bottom: 2%;
	}

	.bookMesHead {
		width: 40%;
		margin-right: 3%;
	}

	input {
		border-bottom: 1rpx solid #282c35;
		text-align: center;
		font-size: 40rpx;
		width: 30%;
	}
</style>
